<template>
	<view class="page">
		<!-- 顶部轮播图区域 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<image :src="item.cover" mode="aspectFill" class="swiper-image" />
				{{item.cover}}
			</swiper-item>
		</swiper>


		<!-- 预订区域 -->
		<view class="booking-section">
			<view class="tab-container">
				<view class="tab-item" :class="{ active: activeTab === 'fullDay' }" @click="switchTab('fullDay')">全天房
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'hourly' }" @click="switchTab('hourly')">特价房
				</view>
			</view>

			<view class="location-bar" >
				<text class="location-text" @click="goCitysChange">{{ location.address }}</text>
				<view class="location-right" @click="getLocation">
					<text class="my-location">我的位置</text>
					<uni-icons type="location" size="16" color="#FC6703"></uni-icons>
				</view>
			</view>

			<view class="date-picker" @click="showCalendar=!showCalendar">
				<view class="date-item">
					<text class="week">{{getWeekday(checkInDate)}}入住</text>
					<text class="day">{{getday1(checkInDate,1)}}</text>
					<text class="month">{{getday1(checkInDate,0)}}</text>
				</view>
				<view class="stay-nights">
					<text>共{{ nightNum }}晚</text>
				</view>
				<view class="date-item">
					<text class="week">{{getWeekday(checkGoDate)}}离店</text>
					<text class="day">{{getday1(checkGoDate,1)}}</text>
					<text class="month">{{getday1(checkGoDate,0)}}</text>
				</view>
			</view>

			<view class="search-bar">
				<uni-icons type="search" size="16" color="#999"></uni-icons>
				<input type="text" placeholder="搜索关键字/酒店名称" v-model="searchKey" />
			</view>

			<button class="book-btn" @click="handleBooking">预订酒店</button>
		</view>

		<!-- 服务区域 -->
		<!-- <view class="service-section">
			<text class="service-title">更多服务</text>
			<view class="service-cards">
				<view class="service-card" @click="goToMembership">
					<text class="card-title">会员计划</text>
					<text class="card-subtitle">升级享特权</text>
					<image class="card-image"
						src="https://public.readdy.ai/ai/img_res/d59d7b78c7ef9c07ca3a15260bd42c88.jpg"
						mode="aspectFit" />
				</view>
				<view class="service-card" @click="goToMall">
					<text class="card-title">微商城</text>
					<text class="card-subtitle">酒店商城优惠多</text>
					<image class="card-image"
						src="https://public.readdy.ai/ai/img_res/26753d84d3e0c55ce71864c9f078e336.jpg"
						mode="aspectFit" />
				</view>
			</view>
		</view> -->

		<!-- 底部导航 -->
		<!-- <view class="tab-bar">
			<view class="tab-bar-item active">
				<uni-icons type="home" size="24" color="#FC6703"></uni-icons>
				<text>预订</text>
			</view>
			<view class="tab-bar-item">
				<uni-icons type="shop" size="24" color="#999"></uni-icons>
				<text>商城</text>
			</view>
			<view class="tab-bar-item">
				<uni-icons type="list" size="24" color="#999"></uni-icons>
				<text>订单</text>
			</view>
			<view class="tab-bar-item">
				<uni-icons type="person" size="24" color="#999"></uni-icons>
				<text>我的</text>
			</view>
		</view> -->
		<!-- <u-calendar :show="showCalendar" :mouthType="activeTab === 'fullDay'?0:1" mode="range"
			@close="showCalendar = false" @confirm="handleDateConfirm"></u-calendar> -->
		<u-popup :show="showCalendar" mode="bottom" :round="15" @close="showCalendar=false">
			<view class="" style="padding-bottom: 120rpx;padding-top: 30rpx;">
				<!-- <multi-platform-calendar :type="0"></multi-platform-calendar> -->
				<hotelDatePicker :type="activeTabNum(activeTab)" @confirm="handleDateConfirm" :initialCheckInDate='checkInDate'></hotelDatePicker>
			</view>
		</u-popup>

		<my-taber :count="0"></my-taber>
	</view>
</template>

<script lang="ts" setup>
	import myTaber from "@/components/myTaber.vue"
	// import multiPlatformCalendar from "@/components/multi-platform-calendar/multi-platform-calendar.vue"
	import hotelDatePicker from "@/components/hotel-date-picker/hotel-date-picker.vue"
	import { ref, onMounted, toRaw } from "vue";
	import {
		onShow,
		onLoad,
		onHide
	} from "@dcloudio/uni-app";
	import amapFile from '../../utils/amap-uni.130.js'
	const myAmapFun = new amapFile.AMapWX({
		key: '3a26f7397fc12384590ae0a8ab25443b'
	});
	import { getBannerListApi, jsConfig } from '@/utils/apiPost.js';
	
	import { requestJsonp } from '@/utils/jsonp';
	import { calculateNights, isOneMonthLaterDate } from "@/utils/time.js";
	import { generateAdminCodes } from '@/utils/getCityCode.js';
	// import WechatSDK from '@/utils/wechat_sdk.js';
	
	const showCalendar = ref(false);
	const checkInDate = ref('请选择入住日期')
	const checkGoDate = ref('请选择离店日期')

	const activeTab = ref("fullDay");
	
	const location = ref({
		address: '天津市红桥区人民政府',
		lat: 0,
		lng: 0,
		province_id: "120000",
		city_id: "120100",
		area_id: "120106",
	});
	const searchKey = ref("");
	interface bannerListItem {
		cover: String,
		id: Number,
		title: String,
		url: String
	}
	const bannerList = ref<bannerListItem[]>([]);
	bannerList.value = [
		{
			cover: "https://public.readdy.ai/ai/img_res/4fc142054abd14860465774aa1d719a9.jpg",
			id: 1,
			title: '轮播图1',
			url: '123'
		},
		{
			cover: "https://public.readdy.ai/ai/img_res/89fd31927854196167b95c2043cf4547.jpg",
			id: 2,
			title: '轮播图2',
			url: '123'
		},
		{
			cover: "https://public.readdy.ai/ai/img_res/1ef29ed3acbe88f0679773e3e55122bc.jpg",
			id: 3,
			title: '轮播图3',
			url: '123'
		}
	]
	
	const switchTab = (tab : string) => {
		activeTab.value = tab;
		// if (tab == 'hourly') {
		// 	let today = new Date(); // 当前日期
		// 	let oneMonthLater = new Date(today); // 一个月后的日期
		// 	oneMonthLater.setMonth(oneMonthLater.getMonth() + 1); // 增加一个月
		// 	let oneDayAfterOneMonthLater = new Date(oneMonthLater); // 一个月后的日期后的一天
		// 	oneDayAfterOneMonthLater.setDate(oneDayAfterOneMonthLater.getDate() + 1); // 增加一天
		// 	console.log(oneMonthLater,oneDayAfterOneMonthLater);
		// 	checkInDate.value = oneMonthLater.toISOString().slice(0, 10)
		// 	checkGoDate.value = oneDayAfterOneMonthLater.toISOString().slice(0, 10)
		// }
	};
	

	const selectCheckIn = () => {
		uni.showToast({
			title: "选择入住日期",
			icon: "none",
		});
	};

	const getDay = (type) => {
		// let today = new Date();
		// let oneDayLater = new Date(today);
		// oneDayLater.setDate(oneDayLater.getDate() + 1);
		// let today1 = new Date();
		// today1.setDate(today1.getDate());
		let today = new Date();
		let tomorrow = new Date(today);
		tomorrow.setDate(tomorrow.getDate() + 1);
		checkInDate.value = today.toISOString().slice(0, 10)
		checkGoDate.value = tomorrow.toISOString().slice(0, 10)
		// console.log(tomorrow.toLocaleDateString());
	}
	getDay(0)
	const handleDateConfirm = (e) => {
		console.log('=eeeeeeeeeeeee',e);
		showCalendar.value = false
		checkInDate.value = e[0]
		checkGoDate.value = e[e.length - 1]
		// checkInDate.value = e.detail.value
		console.log('==============================',calculateNights(e[0],e[e.length - 1]))
		nightNum.value = calculateNights(e[0],e[e.length - 1])
	}
	const nightNum = ref(1)
	const getWeekday = (date) => {
		let weekdays = {
			0: '日',
			1: '一',
			2: '二',
			3: '三',
			4: '四',
			5: '五',
			6: '六'
		};
		let weekday = new Date(date).getDay();
		return '周' + weekdays[weekday];
	}
	const getday1 = (date : any, type : any) => {
		let day = date.split("-")
		if (type == 0) {
			return day[0] + '/' + day[1]
		} else {
			return day[2]
		}
	}
	const selectCheckOut = () => {
		uni.showToast({
			title: "选择离店日期",
			icon: "none",
		});
	};

	const handleBooking = () => {
		// if(activeTabNum(activeTab.value) == 2){
		// 	if(isOneMonthLaterDate(checkInDate.value) == false){
		// 		uni.showModal({
		// 			title: '提示',
		// 			content: '特价房只可以预定一个月后的，请问确定要预定吗？',
		// 			confirmText: '预定',
		// 			success: function (res) {
		// 				if (res.confirm) {
		// 					console.log('用户点击确定');
		// 					// checkInDate.value
		// 					// checkGoDate.value
		// 					let obj={
		// 						checkInDate:checkInDate.value,
		// 						checkGoDate:checkGoDate.value,
		// 						searchKey:searchKey.value,
		// 						mouthType:activeTab.value === 'fullDay'?1:2,
		// 						location: codeValue.value,
		// 						siteInfo: siteInfo.value
		// 					}
							
		// 					uni.navigateTo({
		// 						url: '/pages/list/list?data='+encodeURIComponent(JSON.stringify(obj))
		// 					})
		// 				} else if (res.cancel) {
		// 					console.log('用户点击取消');
		// 				}
		// 			}
		// 		})
		// 	}
		// }else{
			// checkInDate.value
			// checkGoDate.value
			let obj={
				checkInDate:checkInDate.value,
				checkGoDate:checkGoDate.value,
				searchKey:searchKey.value,
				mouthType:activeTab.value === 'fullDay'?1:2,
				location: codeValue.value,
				siteInfo: siteInfo.value
			}
			
			uni.navigateTo({
				url: '/pages/list/list?data='+encodeURIComponent(JSON.stringify(obj))
			})
		// }
		
		
		// uni.showToast({
		// 	title: "预订成功",
		// 	icon: "success",
		// });
	};

	const goToMembership = () => {
		uni.showToast({
			title: "会员计划",
			icon: "none",
		});
	};

	const goToMall = () => {
		uni.showToast({
			title: "微商城",
			icon: "none",
		});
	};
	const getBannerList = () => {
		getBannerListApi().then(result => {
			console.log('11111111111111111',result)
			bannerList.value = result.data as bannerListItem[]
			console.log(toRaw(bannerList.value))
		}).catch(error=>{
			console.log(error)
		})
	};
	interface codeObj {
		provinceCode: string,
		cityCode: string,
		districtCode: string,
	}
	const codeValue = ref<codeObj>({
		provinceCode: '',
		cityCode: '',
		districtCode: ''
	})
	const siteInfo = ref({})
	const getLocation = () => {
		console.log('11111111111111111111111111')
		const geolocation = new qq.maps.Geolocation(
			'6LEBZ-FJ6CL-VAOPZ-ECZ4O-3YJVE-ROF4G', // 替换为你的腾讯地图 API Key
			'订房H5'
		);
	
		geolocation.getLocation(
			async (position) => {
				console.log('position=============================',position)
	      
				try {
					const res = await requestJsonp('https://apis.map.qq.com/ws/geocoder/v1/', {
						key: "6LEBZ-FJ6CL-VAOPZ-ECZ4O-3YJVE-ROF4G",
						location: position.lat + ',' + position.lng,
						output: 'jsonp',
					});
					console.log('结果:', res);
					if(res.message == "Success"){
						location.value.address = res.result.address
						location.value.lat = res.result.location.lat
						location.value.lng = res.result.location.lng
						let obj = await generateAdminCodes(res.result.ad_info.adcode);
						console.log(obj)
						codeValue.value = obj as any
						siteInfo.value = res.result as any
					}
				} catch (err) {
					console.error('请求失败:', err);
				}
			},(err) => {
			  console.error('定位失败:', err);
			  // location.value.address = '定位失败';
			},
	    {
	      timeout: 10000 // 定位超时时间
	    });
	};
	const goCitysChange = () => {
		uni.navigateTo({
			url: '/pages/citysPage/index'
		})
	}
	const activeTabNum = (activeTab) => {
		if(activeTab == "fullDay"){
			return 1
		}else{
			return 2
		}
	}
	onLoad(()=>{
		getLocation()
	})
	const changeCitys = () => {
		uni.$off('city-selected')
		uni.$on('city-selected', async (data) => {
		  // selectedCity = data.name;
		  console.log('接收到的城市22222:', data);
		  try {
		  	const res = await requestJsonp('https://apis.map.qq.com/ws/geocoder/v1/', {
		  		key: "6LEBZ-FJ6CL-VAOPZ-ECZ4O-3YJVE-ROF4G",
		  		location: data.latitude + ',' + data.longitude,
		  		output: 'jsonp',
		  	});
		  	console.log('结果:', res);
		  	if(res.message == "Success"){
		  		location.value.address = res.result.address
		  		location.value.lat = res.result.location.lat
		  		location.value.lng = res.result.location.lng
		  		let obj = await generateAdminCodes(res.result.ad_info.adcode);
		  		console.log(obj)
		  		codeValue.value = obj as any
		  	}
		  } catch (err) {
		  	console.error('请求失败:', err);
		  }
		});
	}
	onShow( () => {
		getBannerList()
		
		changeCitys()
	})
	// onHide(()=>{
	// 	// 移除事件监听，避免重复触发
	// 	uni.$off('city-selected');
	// })
	const siteChange = (lat, lng) => {
		console.log('接收到了===========')
	}
</script>

<style scoped>
	page {
		height: 100%;
	}

	.page {
		min-height: 100%;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		padding-bottom: 100rpx;
	}

	.swiper {
		height: 400rpx;
		margin-bottom: 32rpx;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.header {
		height: 400rpx;
		background-color: #000;
		color: #fff;
		position: relative;
		display: flex;
		padding: 32rpx;
		margin: 0 32rpx 32rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	.header-content {
		flex: 1;
		z-index: 1;
	}

	.logo {
		font-size: 36px;
		font-weight: bold;
		margin-bottom: 16rpx;
	}

	.hotel-name {
		font-size: 28px;
		margin-bottom: 8rpx;
	}

	.sub-title {
		font-size: 24px;
		margin-bottom: 16rpx;
	}

	.address {
		font-size: 14px;
		opacity: 0.8;
	}

	.hotel-image {
		width: 300rpx;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
	}

	.booking-section {
		background-color: #fff;
		padding: 32rpx;
		margin: 0 32rpx 32rpx;
		border-radius: 16rpx;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	}

	.tab-container {
		display: flex;
		border-bottom: 1px solid #eee;
		margin-bottom: 32rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 16px;
		color: #666;
	}

	.tab-item.active {
		color: #fc6703;
		border-bottom: 2px solid #fc6703;
	}

	.location-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		margin-bottom: 32rpx;
	}

	.location-text {
		font-size: 16px;
		color: #333;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		width: calc(100% - 6em);
	}

	.location-right {
		display: flex;
		align-items: center;
	}

	.my-location {
		font-size: 14px;
		color: #fc6703;
		margin-right: 8rpx;
	}

	.date-picker {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.date-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.week {
		font-size: 14px;
		color: #666;
		margin-bottom: 8rpx;
	}

	.day {
		font-family: 'feibozhengdianti';
		font-size: 32px;
		color: #333;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.month {
		font-size: 12px;
		color: #999;
	}

	.stay-nights {
		padding: 0 32rpx;
		font-size: 14px;
		color: #999;
	}

	.search-bar {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		padding: 16rpx 32rpx;
		border-radius: 8rpx;
		margin-bottom: 32rpx;
	}

	.search-bar input {
		flex: 1;
		margin-left: 16rpx;
		font-size: 14px;
	}

	.book-btn {
		width: 100%;
		background-color: #fc6703;
		color: #fff;
		font-size: 16px;
		border-radius: 8rpx;
	}

	.service-section {
		background-color: #fff;
		padding: 32rpx;
		margin: 0 32rpx;
		border-radius: 16rpx;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	}

	.service-title {
		font-size: 18px;
		color: #333;
		margin-bottom: 32rpx;
	}

	.service-cards {
		display: flex;
		gap: 32rpx;
		padding-top: 20rpx;
	}

	.service-card {
		flex: 1;
		background-color: #fff;
		padding: 24rpx;
		border-radius: 12rpx;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	.card-title {
		font-size: 16px;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.card-subtitle {
		font-size: 12px;
		color: #999;
		display: block;
		margin-bottom: 16rpx;
	}

	.card-image {
		width: 100%;
		height: 160rpx;
	}

	.tab-bar {
		height: 100rpx;
		background-color: #fff;
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-top: 1px solid #eee;
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
	}

	.tab-bar-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tab-bar-item text {
		font-size: 12px;
		color: #999;
		margin-top: 8rpx;
	}

	.tab-bar-item.active text {
		color: #fc6703;
	}
</style>